<template>
  <div class="login-wrap container-fluid">
    <div style="width:100%; margin-top: -50px;">
      <div class="sys-logo">
        <img src="static/img/sys_logo.png">
      </div>
      <div class="login-form">
        <form action class="row">
          <div class="form-group col-5">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">
                  <i class="icon-login_username"></i>
                </span>
              </div>
              <input
                id="loginUsername"
                type="text"
                maxlength="11"
                class="form-control"
                placeholder="请输入管理员账号"
                aria-label="Username"
                aria-describedby="basic-addon1"
              >
            </div>
          </div>
          <div class="form-group col-5">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">
                  <i class="icon-login_password"></i>
                </span>
              </div>
              <input
                id="loginUserPwd"
                type="password"
                maxlength="18"
                class="form-control"
                placeholder="请输入密码"
                aria-label="password"
                aria-describedby="basic-addon1"
              >
              <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">
                  <i class="icon-view-password" id="eyesWatch" title="鼠标左键按住检查密码"></i>
                </span>
              </div>
            </div>
          </div>
          <div class="col-2 login-btn">
            <button type="button" class="btn btn-primary" id="loginBtn" @click="loginSumbit()">登 录</button>
          </div>
          <div class="form-group col-12" hidden>
            <div class="form-check remember-pwd">
              <label class="form-check-label checkbox-pwd" id="remeberPwdIcon">记住密码</label>
              <input type="checkbox" hidden id="remeberPwd">
            </div>
          </div>
        </form>
      </div>
    </div>
    <footer>{{ copyTxt }}</footer>

    <!-- <div class="testNav">
      <router-link to="/" exact>首页登录</router-link>
      <router-link to="/driverlive">设备信息</router-link>
      <router-link to="/dataanalysis">数据分析</router-link>
      <router-link to="/safetywarning">安全警告</router-link>
    </div> -->
  </div>
</template>

<script>
import md5 from "js-md5";
export default {
  name: "AdminLogin",
  data() {
    return {
      copyTxt: "@2018 河南信恒北斗有限公司",
    };
  },
  created: function() {
    //创建实例
  },
  mounted: function() {
    document.title = "北斗位置服务管理平台";
    //鼠标按住方式检查密码
    $("#eyesWatch").mousedown(function() {
      $(this).addClass("icon-chakanmima");
      $("#loginUserPwd").attr("type", "text");
    });
    $("#eyesWatch").mouseup(function() {
      $(this).removeClass("icon-chakanmima");
      $("#loginUserPwd").attr("type", "password");
    });
  },
  methods: {
    //提交登录
    loginSumbit() {
      //登录提交
      const that = this;
      var username = $("#loginUsername").val();
      var password = $("#loginUserPwd").val();
      if (username != "" && password != "") {
        var userLoginMsg = {
          encryptPassword: username,
          loginName: password
        };
        //发起请求

        $.ajax({
          url: this.global.loginUrl,
          dataType: "text",
          type: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          data: JSON.stringify(userLoginMsg),
          beforeSend: function() {
            //请求前的处理
          },
          success: function(res) {
            //成功
            var resData = JSON.parse(res);
            var code = resData.code;
            var userInfo = resData.data;
            userInfo = JSON.stringify(userInfo);
            console.log(userInfo);
            that.global.userInfo=userInfo;
            console.log(userInfo);
            localStorage.setItem("userInfo", userInfo);
            if (code === "200") {
              that.$showToast("正在登录...");
              that.$router.push({ path: "/driverlive" });
            } else if (code === "U012001") {
              that.$showToast("用户不存在");
            } else if (code === "U012002") {
              that.$showToast("用户未授权登录");
            } else if (code === "U012003") {
              that.$showToast("用户密码输入错误");
            } else if (code === "U012004") {
              that.$showToast("生成token异常");
            } else {
              that.$showToast("登录失败,请重试");
            }
          },
          complete: function(res) {
            //请求完成的处理
            console.log("完成获取:" + res);
          },
          error: function(res) {
            //请求出错处理
            console.log("失败获取:" + res);
            that.$showToast("error...");
          }
        });
      } else {
        this.$showToast("输入不完整");
      }
    }
  }
};
</script>

<style scoped>
.login-btn .btn-primary:hover {
  background: #ffacbd;
  border: 1px solid #ffacbd;
}
.testNav {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
  left: 0;
  top: 0;
  color: #fff;
}
.testNav a {
  display: block;
  color: #fff;
  padding: 10px 40px;
}
</style>